<div [@routerTransition] id="techfileProLocationComBox" style="height: 100%;">
  <div class="m-subheader ">
    <div class="d-flex align-items-center">
      <div class="mr-auto col-xs-6">
        <h3 class="m-subheader__title m-subheader__title--separator"><span>存放位置</span></h3>
        <span class="m-section__sub"> 存放位置 </span>
      </div>
      <div class="col-xs-6 text-right"></div>
    </div>
  </div>

  <div class="m-content" style="height: calc(100% - 54px);">
    <div class="row" style="height: 100%;">
      <div class="col-md-4">
        <div class="m-portlet m-portlet--mobile">
          <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
              <div class="m-portlet__head-title"><h3 class="m-portlet__head-text">库房管理</h3></div>
            </div>
            <div class="m-portlet__head-tools">
              <button
                
                (click)="createOrEditLocationModal.show(1)"
                class="btn btn-primary"
              >
                <i class="fa fa-plus"></i> 添加库房
              </button>
            </div>
          </div>
          <div class="m-portlet__body">
            <div class="row align-items-center">
              <!-- <Primeng-TurboTable-Start> -->
              <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                <p-table
                  #dataTable
                  [value]="areas"
                  rows="100"
                  [paginator]="false"
                  [scrollable]="true"
                  ScrollWidth="100%"
                  selectionMode="single"
                  [(selection)]="selectedArea"
                  [metaKeySelection]="true"
                  dataKey="id"
                  (onRowSelect)="areaChange($event)"
                  [responsive]="primengTableHelper.isResponsive"
                  [resizableColumns]="primengTableHelper.resizableColumns"
                >
                  <ng-template pTemplate="header">
                    <tr>
                      <th style="width: 100px;"  >
                        {{ l('Actions') }}
                      </th>
                      <th>名称</th>
                      <th>编码</th>
                      <th>描述</th>
                    </tr>
                  </ng-template>
                  <ng-template pTemplate="body" let-record="$implicit">
                    <tr [pSelectableRow]="record">
                      <td style="width: 100px;padding: 10px 0px!important;"  >
                        <div class="btn-group dropdown" normalizePosition>
                          <button
                            class="dropdown-toggle btn btn-sm btn-primary"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                          >
                            <i class="fa fa-cog"></i><span class="caret">{{ l('Actions') }}</span> 
                          </button>
                          <ul class="dropdown-menu">
                            <li>
                              <a (click)="createOrEditLocationModal.show(1, 0, record.id)">{{ l('Edit') }}</a>
                            </li>
                            <li>
                              <a (click)="deleteLocation(1,record)">{{ l('Delete') }}</a>
                            </li>
                          </ul>
                        </div>
                      </td>
                      <th>{{ record.name }}</th>
                      <th>{{ record.code }}</th>
                      <th>{{ record.description }}</th>
                    </tr>
                  </ng-template>
                </p-table>
              </div>
              <!-- <Primeng-TurboTable-End> -->
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="m-portlet m-portlet--mobile">
          <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
              <div class="m-portlet__head-title"><h3 class="m-portlet__head-text">档案柜管理</h3></div>
            </div>
            <div class="m-portlet__head-tools">
              <button
                
                (click)="createOrEditLocationModal.show(2, id1)"
                class="btn btn-primary"
              >
                <i class="fa fa-plus"></i>添加档案柜
              </button>
            </div>
          </div>
          <div class="m-portlet__body">
            <div class="row align-items-center">
              <!-- <Primeng-TurboTable-Start> -->
              <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                <p-table
                  #dataTable
                  [value]="shelfs"
                  rows="100"
                  [paginator]="false"
                  [scrollable]="true"
                  ScrollWidth="100%"
                  selectionMode="single"
                  [(selection)]="selectedShelf"
                  [metaKeySelection]="true"
                  dataKey="id"
                  (onRowSelect)="shelfChange($event)"
                  [responsive]="primengTableHelper.isResponsive"
                  [resizableColumns]="primengTableHelper.resizableColumns"
                >
                  <ng-template pTemplate="header">
                    <tr>
                      <th style="width: 100px" >
                        {{ l('Actions') }}
                      </th>
                      <th>名称</th>
                      <th>编码</th>
                      <th>描述</th>
                    </tr>
                  </ng-template>
                  <ng-template pTemplate="body" let-record="$implicit">
                    <tr [pSelectableRow]="record">
                      <td style="width: 100px;padding: 10px 0px!important;"  >
                        <div class="btn-group dropdown" normalizePosition>
                          <button
                            class="dropdown-toggle btn btn-sm btn-primary"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                          >
                            <i class="fa fa-cog"></i><span class="caret">{{ l('Actions') }}</span> 
                          </button>
                          <ul class="dropdown-menu">
                            <li>
                              <a (click)="createOrEditLocationModal.show(2, id1, record.id)">{{ l('Edit') }}</a>
                            </li>
                            <li>
                              <a (click)="deleteLocation(2,record)">{{ l('Delete') }}</a>
                            </li>
                          </ul>
                        </div>
                      </td>
                      <th>{{ record.name }}</th>
                      <th>{{ record.code }}</th>
                      <th>{{ record.description }}</th>
                    </tr>
                  </ng-template>
                </p-table>
              </div>
              <!-- <Primeng-TurboTable-End> -->
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="m-portlet m-portlet--mobile">
          <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
              <div class="m-portlet__head-title"><h3 class="m-portlet__head-text">架位管理</h3></div>
            </div>
            <div class="m-portlet__head-tools">
              <button
             
                (click)="createOrEditLocationModal.show(3, id2)"
                class="btn btn-primary"
              >
                <i class="fa fa-plus"></i>添加架位
              </button>
            </div>
          </div>
          <div class="m-portlet__body">
            <div class="row align-items-center">
              <!-- <Primeng-TurboTable-Start> -->
              <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                <p-table
                  #dataTable
                  [value]="positions"
                  rows="100"
                  [paginator]="false"
                  [scrollable]="true"
                  ScrollWidth="100%"
                  [responsive]="primengTableHelper.isResponsive"
                  [resizableColumns]="primengTableHelper.resizableColumns"
                >
                  <ng-template pTemplate="header">
                    <tr>
                      <th style="width: 100px"  >
                        {{ l('Actions') }}
                      </th>
                      <th>名称</th>
                      <th>编码</th>
                      <th>描述</th>
                    </tr>
                  </ng-template>
                  <ng-template pTemplate="body" let-record="$implicit">
                    <tr>
                      <td style="width: 100px;padding: 10px 0px!important;">
                        <div class="btn-group dropdown" normalizePosition>
                          <button
                            class="dropdown-toggle btn btn-sm btn-primary"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                          >
                            <i class="fa fa-cog"></i><span class="caret">{{ l('Actions') }}</span> 
                          </button>
                          <ul class="dropdown-menu">
                            <li>
                              <a (click)="createOrEditLocationModal.show(3, id2, record.id)">{{ l('Edit') }}</a>
                            </li>
                            <!-- <li>
                              <a (click)="deleteLocation(3,record)">{{ l('Delete') }}</a>
                            </li> -->
                            <li>
                              <a (click)="printLocationLabel.show(record.id)">打印库位签</a>
                            </li>
                          </ul>
                        </div>
                      </td>
                      <th>{{ record.name }}</th>
                      <th>{{ record.code }}</th>
                      <th>{{ record.description }}</th>
                    </tr>
                  </ng-template>
                </p-table>
              </div>
              <!-- <Primeng-TurboTable-End> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <createOrEditLocationModal #createOrEditLocationModal (modalSave)="reloadPage($event)"></createOrEditLocationModal>
  <printLocationLabel #printLocationLabel></printLocationLabel>
</div>
